<template>
	<view class="container">
		<view class="wd-flex enroll-head">
			<image class="thumb" :src="detail.course.image" mode="aspectFill"></image>
			<view class="wd-flex-cell">
				<view class="title">{{detail.course.name}}<text>{{detail.course.courseCategory.name}}</text></view>
				<view class="time">开课时间 {{detail.start_time}}-{{detail.end_time}}（{{detail.date_text}}）</view>
			</view>
		</view>
		
		<view class="enroll-group">
			<u-cell-group :border="false">
				<u-cell-item title="会员" :arrow="true" @click="selectMember">
					<text class="enroll-group__title">{{ member.username ? member.username : '请选择' }}</text>
				</u-cell-item>
				<u-cell-item title="会员卡" :arrow="true" @click="selectChange">
					<u-select v-model="selectShow" mode="single-column" :list="selectList" @confirm="selectConfirm"></u-select>
					<text class="enroll-group__title">{{ select.label }}</text>
				</u-cell-item>
				<u-cell-item title="预约人次" hover-class="none" :arrow="false">
					<u-number-box class="wd-number-box" size="24" input-height="44" :min="1" v-model="people" @change="peopleChange"></u-number-box>
				</u-cell-item>
				<u-cell-item title="本次扣减" hover-class="none" :arrow="false">
					<text class="enroll-group__title">{{num}}</text>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="enroll-group">
			<u-cell-group :border="false">
				<u-cell-item hover-class="none" :arrow="false">
					<u-input type="textarea" placeholder="请输入备注（非必填项）" v-model="remarks" :clearable="false" />
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- <view class="enroll-group">
			<u-cell-group :border="false">
				<u-cell-item title="是否为无卡预约" hover-class="none" :center="true" :arrow="false">
					<u-switch v-model="freeCard" size="40" inactive-color="#E8E8E8" active-color="#6D4BBE" style="vertical-align: middle;"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</view> -->

		<view class="enroll-footer" >
			<u-button @click="daiAppointment()" :custom-style="wd_button_primary" shape="circle" :ripple="true">立即代约</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				course_arrangement_id:0,
				detail:{},
				member: {},
				select: { value:0,label: '请选择' },
				selectShow: false,
				selectList: [
					// { value: '1', label: '年卡', info: '2021.7.21' },
					// { value: '2', label: '次卡', info: '29次' },
				],
				people: 1,
				num: 1,
				remarks:'',
				freeCard: false
			}
		},
		watch: {
			freeCard(value) {
				if (value) {
					this.freeCard = false
					uni.showToast({
						icon: 'none',
						title: '该课程暂不支持无卡预约'
					})
				}
			}
		},
		onLoad(options){
			var course_arrangement_id = options.course_arrangement_id || 0;
			this.course_arrangement_id = course_arrangement_id;
			this.getDetail();
		},
		onShow(option) {
			var that = this;
			uni.$on('selectMember',(data)=>{
				this.member = data;
				if(data){
					that.getUserVip();
				}
			})
		},
		onUnload() {
			uni.$off('selectMember');
			
		},
		methods: {
			getDetail(){
				var that = this;
				var course_arrangement_id = that.course_arrangement_id;
				that.$core.post({url:'fitness.manage/arrangement_detail',data:{arrangement_id:course_arrangement_id},success:(ret)=>{
					that.detail = ret.data;
				}});
			},
			
			getUserVip(){
				var that = this;
				var course_arrangement_id = that.course_arrangement_id;
				var member = that.member;
				var selectList = [];
				that.$core.post({url:'fitness.manage/course_vip',data:{arrangement_id:course_arrangement_id,user_id:member.id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						selectList[i] = {value: ret.data[i].id,label: ret.data[i].vip.name}
					}
					that.selectList = selectList;
				}});
			},
			
			selectMember() {
				uni.navigateTo({
					url: '/pages/manage/selectMember/selectMember'
				})
			},
			selectChange(e) {
				this.selectShow = !this.selectShow
			},
			selectConfirm(e) {
				this.selectList.map((val, index) => {
					if (e[0].value == val.value) {
						this.select = val;
					}
				})
			},
			peopleChange(e) {
				this.num = e.value;
			},
			
			daiAppointment(){
				var that = this;
				var arrangement_id = that.course_arrangement_id;
				var member = that.member;
				var userVip = that.select;
				if(!member.id){
					uni.showToast({title: '请选择会员', icon: 'none'})
					return false;
				}
				if(!userVip.value){
					uni.showToast({title: '请选择使用会员卡', icon: 'none'})
					return false;
				}
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				if(!shop_id){
					uni.showToast({title: '未找到门店未选择', icon: 'none'})
					return false;
				}
				
				that.$core.post({url:'fitness.manage/appoint',data:{user_id: member.id,arrangement_id:arrangement_id,user_vip_id: userVip.value,appoint_num: that.num,shop_id: shop_id,remarks: that.remarks},success:(ret)=>{
					uni.showToast({
						title: ret.msg,
						icon: 'none',
						success() {
							setTimeout(function(){
								uni.navigateBack();
							},1500)
						}
					})
				}});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.enroll-head {
		padding: 32rpx 58rpx;
		.thumb {
			display: block;
			margin-right: 25rpx;
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
		}
		.title {
			line-height: 48rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
			text {
				display: inline-block;
				vertical-align: middle;
				margin-top: -4rpx;
				margin-left: 14rpx;
				padding: 0 14rpx;
				background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
				line-height: 32rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				border-radius: 24rpx 0 24rpx 0;
			}
		}
		.time {
			margin-top: 5rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
	
	.enroll-group {
		margin: 16rpx 24rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 24rpx;
		overflow: hidden;
		
		.enroll-group__title,
		/deep/ .u-cell_title,
		/deep/ .u-input__textarea {
			font-size: 26rpx;
			color: #333333;
		}
		
		.enroll-group__price {
			font-size: 32rpx;
			color: #EE0000;
		}
		
		.enroll-group__text {
			margin-top: 10rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #D7D7D7;
		}
	}
	.enroll-footer {
		padding: 70rpx 24rpx;
	}
</style>